<!--
 * @Description: 
 * @Author: 胡涛
 * @Date: 2023-12-03 11:01:32
 * @LastEditors: 胡涛
 * @LastEditTime: 2023-12-10 23:05:16
-->
<template>
  <a-modal
    :open="visible"
    :keyboard="false"
    :maskClosable="false"
    title="配置格式化"
    @cancel="onCancel"
    @ok="onSuccess"
    :width="800"
  >
    <a-form ref="formRef" v-bind="formLayout" v-if="config?.formatOptions">
      <a-form-item label="字段名">
        <a-input :value="config.name"></a-input>
      </a-form-item>
      <a-form-item label="格式化类型">
        <a-select
          v-model:value="config.formatType"
          :options="formatterOptions"
          @change="onFormatTypeChanged"
          :fieldNames="{
            label: 'name',
            value: 'type',
          }"
        ></a-select>
      </a-form-item>
      <a-form-item
        v-if="config.formatType == 'dictionary' || config.formatType == 'enum'"
        label="(字典/枚举)名称"
      >
        <a-input
          v-model:value="config.formatOptions.name"
          @change="onFormatParamsChanged"
        ></a-input>
      </a-form-item>
      <template
        v-else-if="
          config.formatType == 'string' || config.formatType == 'number'
        "
      >
        <a-form-item label="前缀">
          <a-input
            v-model:value="config.formatOptions.prefix"
            @change="onFormatParamsChanged"
          ></a-input>
        </a-form-item>
        <a-form-item label="后缀">
          <a-input
            v-model:value="config.formatOptions.suffix"
            @change="onFormatParamsChanged"
          ></a-input>
        </a-form-item>
        <a-form-item label="小数位数" v-if="config.formatType == 'number'">
          <a-input-number
            v-model:value="config.formatOptions.precision"
            :min="0"
            :max="10"
            @change="onFormatParamsChanged"
          />
        </a-form-item>
      </template>
      <template v-else-if="config.formatType == 'boolean'">
        <a-form-item label="True显示值">
          <a-input
            v-model:value="config.formatOptions.trueValue"
            @change="onFormatParamsChanged"
          ></a-input>
        </a-form-item>
        <a-form-item label="False显示值">
          <a-input
            v-model:value="config.formatOptions.falseValue"
            @change="onFormatParamsChanged"
          ></a-input>
        </a-form-item>
      </template>
      <template v-else-if="config.formatType == 'date'">
        <a-form-item label="显示格式">
          <a-input
            v-model:value="config.formatOptions.trueValue"
            @change="onFormatParamsChanged"
          ></a-input>
        </a-form-item>
      </template>
      <a-form-item
        label="格式化配置"
        v-if="config.formatType && config.formatType !== 'default'"
      >
        <div class="script-editor" v-if="!extraLibLoading">
          <monaco-editor
            :height="360"
            language="javascript"
            v-model:value="formatter"
            :extraLibSource="extraLibSource"
          />
        </div>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { ReportColumnConfig } from "@/api/report/types";
import { onMounted, ref } from "vue";
import libApi from "@/api";
import { formatterOptions } from "@/config/formatter";
import configCategory from "@/api/system/configCategory";
interface IConfigFormatterProps {
  visible: boolean;
  config: ReportColumnConfig;
}

const props = defineProps<IConfigFormatterProps>();
const emits = defineEmits(["close", "success", "update:visible"]);
const formatter = ref<string>("");

const extraLibSource = ref<string>();
const extraLibLoading = ref(true);

/**
 * 表单布局方式
 */
const formLayout = {
  labelCol: { span: 3 },
  labelAlign: "right",
  wrapperCol: { span: 20 },
};

const onSuccess = () => {
  props.config.formatter = formatter.value;
  emits("success");
  emits("close");
  emits("update:visible", false);
};

const onCancel = () => {
  emits("close");
  emits("update:visible", false);
};

const onFormatTypeChanged = (value: string, e: any) => {
  props.config.formatOptions = { ...e.defaultArgs };
  formatter.value = props.config.formatter = e.formatter(
    props.config.formatOptions
  );
};

const onFormatParamsChanged = () => {
  let callback = formatterOptions.find(
    (x) => x.type == props.config.formatType
  ).formatter;
  let params = props.config.formatOptions as any;
  formatter.value = props.config.formatter = callback(params);
};

const loadExtraLibSource = () => {
  libApi
    .get("./typescript/column.formatter.d.ts")
    .then((res) => {
      extraLibSource.value = res;
    })
    .finally(() => {
      extraLibLoading.value = false;
    });
  extraLibLoading.value = true;
};

onMounted(() => {
  props.config.formatOptions = props.config.formatOptions || {};
  formatter.value = props.config.formatter || "return value;";

  loadExtraLibSource();
});
</script>

<style lang="less" scoped></style>
